<template>
  <div class="app-container">
    <el-button type="success" @click="openAddVideo()" style="margin-bottom: 10px;margin-top: -10px" size="mini" icon="el-icon-plus">添加小节</el-button>
    <!-- 表格 -->
    <el-table :data="list" height="500" border fit highlight-current-row>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="cover"
        label="视频"
        width="320"
        align="center"
        style=""
      >
        <template slot-scope="scope">
          <router-link :to="'/video/viewVideo/' + scope.row.videoSourceId">
            <el-button @click="getVideoData(scope.row.videoSourceId)" type="primary" size="mini" icon="el-icon-view" plain
            >查看</el-button
            >
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="小节名称"
        width="150"
        align="center"
      />
      <el-table-column
        prop="sort"
        label="课时排序"
        width="80"
        align="center"
      />
      <el-table-column
        prop="playCount"
        label="播放次数"
        width="80"
        align="center"
      />
      <el-table-column label="是否免费" width="80" align="center">
        <template slot-scope="scope">

          <el-tag size="small" type="success" v-if="scope.row.isFree===1"> 免费</el-tag>

          <el-tag size="small" v-if="scope.row.isFree!==1"> 收费</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="gmtCreate"
        label="添加时间"
        width="160"
        align="center"
      />

      <el-table-column
        prop="gmtModified"
        label="更新时间"
        width="160"
        align="center"
      />
      <el-table-column label="操作" width="200" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="openEditVideo(scope.row.id)" size="mini" icon="el-icon-edit">修改</el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeVideo(scope.row.id)"
            slot="reference"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getVideoList"
    />
    <!--    修改-->
    <!-- 添加和修改课时表单 -->
    <el-dialog :visible.sync="dialogVideoFormVisible" title="修改小节">
      <el-form :model="video" label-width="120px">
        <el-form-item label="课时标题">
          <el-input v-model="video.title" />
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number
            v-model="video.sort"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="video.isFree">
            <el-radio :label="1">免费</el-radio>
            <el-radio :label="0">收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传视频">
          <el-upload
            :on-success="handleVodUploadSuccess"
            :on-remove="handleVodRemove"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :file-list="fileList"
            :action="BASE_API + '/vod/video/upload'"
            :limit="1"
            class="upload-demo"
          >
            <el-button size="small" type="primary">上传视频</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">
                最大支持1G，<br />
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br />
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br />
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br />
                SWF、TS、VOB、WMV、WEBM 等视频格式上传
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
        <el-button
          :disabled="saveVideoBtnDisabled"
          type="primary"
          @click="updateVideo"
        >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogAddVideo" title="添加小节">
      <el-form :model="video" label-width="120px">
        <el-form-item label="目录">
          <el-select v-model="video.courseId" placeholder="请选择" @change="getChapter(video.courseId)">
            <el-option
              v-for="course in courses"
              :key="course.id"
              :label="course.title"
              :value="course.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="video.chapterId" placeholder="请选择">
            <el-option
              v-for="chapter in chapters"
              :key="chapter.id"
              :label="chapter.title"
              :value="chapter.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课时标题">
          <el-input v-model="video.title" />
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number
            v-model="video.sort"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="video.isFree">
            <el-radio :label="1">免费</el-radio>
            <el-radio :label="0">收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传视频">
          <el-upload
            :on-success="handleVodUploadSuccess"
            :on-remove="handleVodRemove"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :file-list="fileList"
            :action="BASE_API + '/vod/video/upload'"
            :limit="1"
            class="upload-demo"
          >
            <el-button size="small" type="primary">上传视频</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">
                最大支持1G，<br />
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br />
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br />
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br />
                SWF、TS、VOB、WMV、WEBM 等视频格式上传
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVideo = false">取 消</el-button>
        <el-button
          :disabled="saveVideoBtnDisabled"
          type="primary"
          @click="addVideo"
        >确 定</el-button
        >
      </div>
    </el-dialog>

  </div>
</template>

<script>
import video from "@/api/video";
import course from '../../api/course'
import chapter from '../../api/chapter'
export default {

  data() {
    //定义变量和初始值
    return {
      saveVideoBtnDisabled:false,
      list: null, //查询之后返回的集合
      page: 1,
      total: 0,
      limit: 10,
      video:{
        courseId:"",
        chapterId:"",
        videoSourceId:"",
        videoOriginalName:""
      },
      playAuth:"",
      fileList:[],
      dialogAddVideo:false,
      dialogVideoFormVisible: false, //章节弹框
      BASE_API: process.env.BASE_API, // 接口API地址
      loading: true,
      courses:null,
      chapters:null,
     courseId:null,
      chapterId:null
    };
  },
  created() {

    this.getVideoList();
  },
  methods:{
    getVideoData(vid) {
      //1、调用后台接口获取视频vid,playAuth(鉴权地址),cover(视频封面)的逻辑
      video.getPlayAuth(vid).then(response => {
        this.playAuth = response.data.playAuth;
        this.$cookies.set("playAuth",this.playAuth);
        console.log(response.data.playAuth)
      })
    },
    getCourseInfo(){
      // this.video={};
      course.getCourse().then(response=>{
        this.courses=response.data.course;
      })
    },
    getChapter(courseId){
      this.video.chapterId=null;
      chapter.getChapter(courseId).then(response=>{
        this.chapters=response.data.chapter;
        console.log(courseId)
      })
    },
    getVideoList(page=1){
      this.page=page;
      video.getVideoPage(this.page,this.limit).then(response=>{
        this.list=response.data.page.records;
        this.total = response.data.page.total;
      }).catch((error) => {
        console.log(error);
      });
    },
    resetData() {
      //清空

    },

    handleVodRemove() {
      //调用接口的删除视频的方法
      video.deleteVideoAli(this.video.videoSourceId).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "删除视频成功!",
        });
        //把文件列表清空
        this.fileList = [];
        //把video视频id和视频名称值清空
        //上传视频id赋值
        this.video.videoSourceId = "";
        //上传视频名称赋值
        this.video.videoOriginalName = "";
      });
    },
    //点击×调用这个方法
    beforeVodRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //上传视频成功调用的方法
    handleVodUploadSuccess(response, file, fileList) {
      //上传视频id赋值
      this.video.videoSourceId = response.data.videoId;
      //上传视频名称赋值
      this.video.videoOriginalName = file.name;
    },
    handleUploadExceed() {
      this.$message.warning("想要重新上传视频，请先删除已上传的视频");
    },
    openEditVideo(id) {
      this.dialogVideoFormVisible = true;
      video.getVideo(id).then((response) => {
        this.video = response.data.video;
      });
    },
    openAddVideo() {
      this.video={};
      this.dialogAddVideo = true;

      this.getCourseInfo();
    },
    updateVideo() {
      video.updateVideo(this.video).then((response) => {
        this.dialogVideoFormVisible = false;
        this.$message({
          type: "success",
          message: "修改小节成功!",
        });
        this.getVideoList();
      });
    },
    removeVideo(id) {
      this.$confirm("此操作将永久删除小节记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //点击确定，执行then方法
        //调用删除的方法
        video.deleteVideo(id).then((response) => {
          this.$message({
            type: "success",
            message: "删除小节成功!",
          });
          this.getVideoList();
        });
      });
    },
    addVideo() {

      video.addVideo(this.video).then(response=>{
        this.dialogAddVideo=false;
        this.$message({
          type: "success",
          message: "添加小节成功!",
        });
        this.getVideoList();
      })
      return undefined;
    }
  }
}
</script>


